/*
 * @Author: xiaosihan 
 * @Date: 2024-05-29 02:21:54 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-05-29 03:56:02
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./infoModal.module.less";
import { InfoPointData } from "@views/home/type";
import homeStore from "@views/home/homeStore";

interface Iprops {
    children?: ReactNode
}

// 信息弹窗
export default function InfoModal() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [infoPointData, setInfoPointData] = useState<undefined | InfoPointData>(homeStore.infoPoint);
    const [showPoint, setShowPoint] = useState(homeStore.showPoint);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setInfoPointData(homeStore.infoPoint);
        setShowPoint(homeStore.showPoint);
    }), []);

    useEffect(() => autorun(() => {
        const { x, y } = homeStore.modalPosition;
        if (dom.current) {
            const { clientWidth, clientHeight } = dom.current;
            Object.assign(dom.current.style, {
                left: `${x - (clientWidth / 2)}px`,
                top: `${y - clientHeight - 10}px`
            });
        }
    }), []);


    return (
        (showPoint && infoPointData) ?
            <div ref={dom} className={styles["info-point"]}>
                <div className={styles["info-point-wrap"]}>
                    <div className={styles["info-point-wrap-inner"]}>
                        <div className={styles["info-point-line"]}>
                            <div className={styles["line"]}></div>
                            <div className={styles["line"]}></div>
                            <div className={styles["line"]}></div>
                        </div>
                        <div className={styles["info-point-content"]}>
                            <div className={styles["content-item"]}>
                                <span className={styles["label"]}>名称</span>
                                <span className={styles["value"]}>{infoPointData.name}</span>
                            </div>
                            <div className={styles["content-item"]}>
                                <span className={styles["label"]}>PM2.5</span>
                                <span className={styles["value"]}>{infoPointData.value}ug/m²</span>
                            </div>
                            <div className={styles["content-item"]}>
                                <span className={styles["label"]}>等级</span>
                                <span className={styles["value"]}>{infoPointData.level}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            : null
    );

}


